<template>
  <ul class="prolist">
     <router-link :to="{name: 'detail', params: {proid: item.proid}}" tag="li" class="proitem" v-for="(item, index) of prolist" :key="index">
      <div class="itemimg">
        <img :src="item.proimg" alt="">
      </div>
      <div class="iteminfo">
        <h2 class="pro-title">{{ item.proname }}</h2>
        <p class="pro-price">￥{{ item.middlep }}</p>
        <div class="pro-bottom">
          <span>销量：{{ item.saled }}</span>
          <i class="iconfont icon-gouwuche"></i>
        </div>
      </div>
    </router-link>
  </ul>
</template>

<script>
export default {
  props: ['prolist']
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.prolist {
  @include flex();
  @include rect(100%, auto);
  @include overflow();
  @include flexbox();
  @include flex-wrap(wrap);
  @include justify-content(space-around);
  .proitem {
    @include rect(48%, 2.38rem);
    @include background-color(#fff);
    @include flexbox();
    @include display(inline-block);
    @include margin(.05rem 0 0 0);
    .itemimg {
      @include rect(100%,1.53rem);
      img {
        @include rect(100%,1.53rem);
      }
    }
    .iteminfo {
      .pro-title, .pro-price, .pro-bottom{
        font-size: 14px;
        color: #666;
        margin: 5px 0;
        padding: 0 10px;
      }
      .pro-price {
        color: #FF6600;
        font-size: 14px;
      }
      .pro-bottom {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #a8a8a8;
        i {
          @include color(#ff6600);
        }
      }
    }
  }
}
</style>
